<script>
import KCard from '@/components/KCard'
import DialogContent from '@/components/DialogContent/index.vue'
import { getPaper } from '@/api/examination'
import {
  examScoreRanking,
  quickEntry,
  quickReveal,
  webMenu,
  addQuickEntry,
  getDisplayMode,
  deleteQuickEntry
} from '@/api/dashboard'

export default {
  components: {
    KCard,
    DialogContent
  },
  props: {
    medals: {
      type: Array,
      required: false,
      default() {
        return ['no1', 'no2', 'no3']
      }
    }
  },
  data() {
    return {
      loading: true,
      addBtnLoading: false,
      deleteBtnLoading: false,
      data: null,
      testPaper: null,
      testPapers: [],
      dialogVisible: false,
      quickMuneDialog: false,
      quickEntryData: [],
      quickEntryForm: {
        menu_type: 'web',
        menu_id: null
      },
      options: [
        {
          value: 1,
          label: '手动管理'
        },
        {
          value: 2,
          label: '最近使用'
        }
      ],
      quickMenuData: []
    }
  },
  computed: {
    text() {
      if (this.testPaper === null) return '选择试卷'

      return this.testPaper?.title
    },
    examScoreRankingFormatted() {
      if (this.data === null) return []

      return this.data.map((item, index) => {
        const { id, user: employee, score } = item
        return {
          id,
          rank: index + 1,
          employee: {
            id: employee.id,
            name: employee.username,
            post: employee?.userCompany?.position
          },
          score
        }
      })
    }
  },
  created() {
    this.initData()
    this.$bus.$on('notify-getQuickEntry', () => {
      this.getQuickEntry()
    })
  },
  methods: {
    handlePaperSelected(command) {
      this.testPaper = command
      this.getExamScoreRanking()
    },
    async getExamScoreRanking() {
      this.loading = true
      const params = {
        paperId: this.testPaper?.id ?? this.testPapers?.[0]?.id ?? ''
      }

      const result = await examScoreRanking(params).catch((err) => {
        throw new Error(err?.response?.data?.message ?? '获取考试排行失败')
      })

      if (result.code !== 200) throw new Error('获取考试排行失败')

      this.loading = false
      this.data = result.data
    },
    async getQuickEntry() {
      try {
        const res = await quickEntry({ menu_type: 'web' })
        this.quickEntryData = res.data
        this.loading = false
        console.log(res, 'quickEntry')
      } catch (error) {
        console.log(error)
      }
    },
    async getTestPaper() {
      const result = await getPaper().catch((err) => {
        throw new Error(err?.response?.data?.message ?? '获取试卷失败')
      })

      if (result.code !== 200) throw new Error('获取试卷失败')

      this.testPapers = result.data
    },
    async loadData() {
      await Promise.allSettled([this.getTestPaper()])

      await Promise.allSettled([this.getExamScoreRanking()])

      await Promise.allSettled([this.getQuickEntry()])
    },
    async initData() {
      await this.loadData()
    },
    async setQuickEntry() {
      const res = await getDisplayMode({ menu_type: 'web' })
      this.quickEntryForm.menu_id = res.data.type
      console.log(this.quickEntryForm.menu_id, 'id')
      //   console.log(res, "set");
      this.dialogVisible = true
    },
    async changeMode(value) {
      const params = {
        type: value,
        menu_type: 'web'
      }
      try {
        const res = await quickReveal(params)
        this.quickEntryForm.menu_id = value
        this.getQuickEntry()
        this.$message.success(res.message)
        console.log(res)
      } catch (err) {
        this.$message.error(err.response.data.message)
      }
    },
    // 获取所有的web菜单
    async addQuickMune() {
      const res = await webMenu({ quick: 1 })
      console.log(this.quickEntryData, 'quickEntryData')
      this.quickMenuData = res.data.flatMap((item) => {
        return item?.children?.map((children) => {
          const menu = this.quickEntryData.find((menu) => menu?.menu_id === children?.id)
          return {
            id: children?.id,
            title: children?.meta?.title,
            icon: children?.meta?.icon,
            path: children?.path,
            isShow: children?.quick.length !== 0,
            menu_id: menu ? menu.id : null
          }
        })
      })
      // console.log(this.quickMenuData,'quick');
      this.quickMuneDialog = true
    },
    // 添加应用
    async addApplication(value) {
      this.addBtnLoading = true
      const params = {
        menu_id: value.id,
        menu_type: 'web'
      }
      try {
        const res = await addQuickEntry(params)
        console.log(res)
        this.getQuickEntry()
        this.addQuickMune()
        this.$message.success(res.message)
      } catch (err) {
        this.$message.error(err.response.data.message)
      } finally {
        this.addBtnLoading = false
      }
    },
    deleteApplication(data) {
      console.log(data)
    },
    // 点击图标进行跳转
    quickJump(params) {
      this.$router.push(params.web_menu.path)
    },
    async deleteMenu(id) {
      this.deleteBtnLoading = true
      try {
        const params = {
          id: id,
          menu_type: 'web'
        }
        await this.$confirm('您确定要删除吗?', '提示')
        const res = await deleteQuickEntry(params)
        this.$message.success(res.message)
        this.getQuickEntry()
        this.addQuickMune()
        console.log(res)
      } catch (error) {
        this.$message.error(error.response.data.message)
      } finally {
        this.deleteBtnLoading = false
      }
    }
  }
}
</script>

<template>
  <div v-loading="loading" class="quickEntry">
    <div class="quickEntry-herder">
      <div class="quickEntry-herder-left">我的</div>
      <div class="quickEntry-herder-right" @click="setQuickEntry">
        <i class="el-icon-s-operation icon" />
      </div>
    </div>
    <div class="quickEntry-container">
      <div
        v-for="(item, index) in quickEntryData"
        :key="index"
        class="quickEntry-container-item"
        @click="quickJump(item)"
      >
        <svg-icon
          :icon-class="item?.web_menu?.icon ?? 'quick-menu'"
          class="quickEntryIcon"
        />
        <span class="quickEntry-container-item-title">{{
          item?.web_menu?.title
        }}</span>
      </div>
    </div>

    <DialogContent
      title="设置快捷入口"
      width="30%"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <div class="quickDialog">
        <div class="quickDialog-item">
          <span class="quickDialog-item-title">切换类型</span>
          <el-select
            v-model="quickEntryForm.menu_id"
            placeholder="请选择"
            @change="changeMode"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="quickDialog-item">
          <span class="quickDialog-item-title">应用管理</span>
          <div
            v-for="(item, index) in quickEntryData"
            :key="index"
            class="quickDialog-item-container"
          >
            <div class="quickDialog-item-container-iconList">
              <!-- <el-popconfirm v-if="quickEntryForm.menu_id===1" title="您确定要删除吗?" @confirm="deleteMenu(item.id)">
              <i class="el-icon-error" slot="reference"></i>
            </el-popconfirm> -->
              <svg-icon
                :icon-class="item?.web_menu?.icon ?? 'quick-menu'"
                class="quickEntryIcon"
              />
            </div>
            <span class="quickDialog-item-container-title">{{
              item?.web_menu?.title
            }}</span>
          </div>
          <div v-if="quickEntryForm.menu_id===1" class="quickDialog-item-addBox" @click="addQuickMune">
            <i class="el-icon-plus" />
          </div>
        </div>
      </div>
    </DialogContent>

    <DialogContent
      title="添加应用"
      width="30%"
      :close-on-click-modal="false"
      :visible.sync="quickMuneDialog"
    >
      <div class="quickMune">
        <div v-for="(item, index) in quickMenuData" :key="index" class="quickMune-item">
          <div class="quickMune-item-left">
            <svg-icon :icon-class="item.icon ?? ''" class="icon" />
            <span class="quickMune-item-left-title">{{ item.title }}</span>
          </div>
          <div class="quickMune-item-right">
            <!-- <el-button :disabled="item.isShow"  @click="addApplication(item)">
                添加</el-button> -->
            <el-button v-if="!item.isShow" :loading="addBtnLoading" type="primary" @click="addApplication(item)">
              添加</el-button>
            <el-button
              v-else
              :loading="deleteBtnLoading"
              style="background-color: #F56C6C;color: white;border: none;"
              @click="deleteMenu(item.menu_id)"
            >
              移除</el-button>
          </div>
        </div>
      </div>
    </DialogContent>
  </div>
  <!-- <KCard title="我的" v-loading="loading">
        <template #actions>
            <el-dropdown @command="handlePaperSelected">
                <div class="selector">
                    {{ text }}<i class="el-icon-arrow-down el-icon--right" />
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        v-for="item in testPapers"
                        :key="item.id"
                        :command="item"
                    >
                        {{ item.title }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </template>
        <el-table class="ranking" height="700px" :data="examScoreRankingFormatted" style="width: 100%" header-row-class-name="ranking-table-header">

            <el-table-column label="排名" width="80">

                <template slot-scope="scope">
                    <svg-icon v-if="scope.$index < medals.length" :icon-class="medals[scope.$index]"
                        style="width: 24px;height: 24px;" />
                    <div style="width: 24px;height: 24px;text-align: center;" v-else>{{ scope.row.rank }}</div>
                </template>

            </el-table-column>
            <el-table-column prop="score" label="分数" width="80" />
            <el-table-column prop="employee.post.name" label="岗位" width="100" />
            <el-table-column prop="employee.name" label="姓名" />
        </el-table>
    </KCard> -->
</template>

<style lang="scss" scoped>
.quickEntry {
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0px 0px 2px 0px rgba(158, 158, 158, 0.3);
  &-herder {
    display: flex;
    justify-content: space-between;
    &-left {
      font-size: 18px;
    }
    &-right {
      cursor:pointer;
      .icon {
        font-size: 24px;
      }
    }
  }
  &-container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 6px;
    max-height: calc((2em + 40px) * 5);
    overflow: hidden;
    &-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      margin: 10px;
      flex-basis: calc(50% - 20px);
      border: 1px solid #bbbbbb;
      border-radius: 6px;
      cursor:pointer;
      width: 40%;
      .quickEntryIcon {
        width: 30px;
        height: 20px;
      }
      &-title {
        padding-left:10px;
        font-size: 14px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .quickDialog {
    &-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-bottom: 20px;
      &-title {
        font-weight: 800;
        padding-right: 20px;
      }

      &-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 12px;
        &-iconList{
          position: relative;
          .el-icon-error{
            position: absolute;
            right:-6px;
            top:-4px;
            color:#f56c6c ;
            font-size: 20px;
            cursor:pointer;
          }
          .quickEntryIcon{
            width: 40px;
            height: 40px;
        }
        }

        &-title{
            padding: 8px 0;
        }
      }

      &-addBox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        margin-left: 12px;
        background-color: #f5f5f6;
        cursor:pointer;
        .el-icon-plus {
          font-size: 24px;
        }
      }
    }
  }

  .quickMune {
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #f5f5f6;
      &-left {
        display: flex;
        align-items: center;
        .icon {
          width: 40px;
          height: 40px;
          // background-color:#409eff;
        }
        &-title {
          font-weight: 800;
          padding-left: 20px;
        }
      }
      &-right{
        padding-right: 14px;
      }
    }
  }
}
// .selector {
//     background-color: #f5f5f5;
//     padding: 4px 8px;
//     border-radius: 4px;
//     color: #8E8E8E;
//     font-size: 12px;
//     cursor: pointer;
// }
// .ranking.el-table {
//     .ranking-table-header {
//         border-radius: 4px;
//         overflow: hidden;
//     }

//     th.el-table__cell {
//         background-color: inherit;
//         background-color: #f5f5f5;
//         border: none;
//         color: #3D3D3D;
//         font-weight: normal;
//         font-size: 14px;
//     }

//     &::before {
//         content: none;
//     }

//     .el-table__body {
//         .el-table__row {
//             &:last-child {
//                 .el-table__cell {
//                     border-bottom: none;
//                 }
//             }

//             .el-table__cell {
//                 color: #3D3D3D;
//                 border-bottom: 1px solid #f5f5f5;
//             }
//         }
//     }
// }
</style>
